<template> 
  <el-dialog  :close-on-click-modal="false" :title="title" :visible.sync="isShow" @close="hideDialog" class="dialogEdit" width="460px">
    <el-form ref="forms" label-width="130px" :rules="rules" :model="forms">
      <!-- <el-form-item label="部门：" prop="deptName">
        <el-input v-model="deptName" disabled></el-input>
      </el-form-item> -->
      <el-form-item label="职位名称：" prop="positionName">
        <el-input v-model="forms.positionName" clearable placeholder="请输入职位名称"></el-input>
      </el-form-item>
      <!-- <el-form-item label="职位编码：" prop="positionCode">
        <el-input v-model="forms.positionCode" clearable placeholder="请输入职位编码"></el-input>
      </el-form-item> -->
      <!-- <el-form-item label="是否为管理层：" prop="isManagement">
        <el-select v-model="forms.isManagement" placeholder="请选择是否为管理层">
          <el-option :label="'是'" :value="1"></el-option>
          <el-option :label="'否'" :value="0"></el-option>
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="职位标签：">
        <el-select v-model="forms.labelIds" multiple placeholder="请选择职位标签">
          <el-option v-for="item in labels" :label="item.labelName" :value="item.id" :key="item.id"></el-option>
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="备注：" prop="remark">
        <el-input v-model="forms.remark" clearable placeholder="请输入备注"></el-input>
      </el-form-item> -->
      <el-form-item label="主要职责：" prop="remark">
        <el-input v-model="forms.remark" clearable placeholder="请输入职责"></el-input>
      </el-form-item>
       <el-form-item label="职级：" prop="positionCode">
        <el-select v-model="forms.positionCode" placeholder="请选择职级">
          <el-option v-for="item in positionOpt" :label="item.dictValue" :value="item.dictValue" :key="item.index"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="hideDialog">取 消</el-button>
      <el-button type="primary" :disabled="isSaveing" @click="handleSubmit()">
        <span v-if="isSaveing">保存中...</span>
        <span v-else>保 存</span>
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
import { savePosition, getPositionInfo, editPosition, getDictList } from '@/apis/user/organiza';
import { getTagsList } from '@/apis/user/tags';
export default {
    props: ['isShowDialog', 'deptId', 'deptName', 'positionId'],
    data () {
        var checkDeptName = (rule, value, callback) => { // 自定义验证规则
            if (this.deptName === '') {
                callback(new Error('请选择部门'));
            }
            callback();
        };
        return {
            isShow: this.isShowDialog,
            labels: [],
            title: '新增职位',
            positionOpt: [],
            forms: {
                deptId: this.deptId,
                positionName: '',
                positionCode: '',
                isManagement: null,
                createdBy: null,
                labelIds: [],
                remark: ''
            },
            rules: {
                deptName: [
                    { required: true, validator: checkDeptName, trigger: 'blur' }
                ],
                positionName: [
                    { required: true, message: '请填写职位名称', trigger: 'blur' },
                    { max: 30, message: '请输入长度不超过30的字符', trigger: 'blur' }
                ],
                // positionCode: [
                //     { required: true, message: '请填写职位编码', trigger: 'blur' },
                //     { max: 30, message: '请输入长度不超过30的字符', trigger: 'blur' }
                // ],
                positionCode: [
                    { required: true, message: '请选择职级', trigger: 'change' }
                ],
                remark: [
                    { max: 100, message: '请输入长度不超过100的字符', trigger: 'blur' }
                ]
            },
            isSaveing: false
        };
    },
    created () {
        getTagsList().then(res => {
            this.labels = res.data;
            
        });
        getDictList({'type': 'organ_position'}).then(res => {
            this.positionOpt = res.data;
            console.log(res, 2600);
        });
        if (this.positionId) {
            this.title = '编辑职位';
            this.getPositionInfo(this.positionId);
        } else {
            this.title = '新增职位';
        }
        
    },
    methods: {
        hideDialog () {
            this.$refs.forms.resetFields();
            this.$emit('close');
        },
        getPositionInfo (id) {
            getPositionInfo(id).then(res => {
                this.forms.positionName = res.data.positionName;
                this.forms.positionCode = res.data.positionCode;
                this.forms.isManagement = res.data.isManagement;
                this.forms.labelIds = res.data.labelId ? res.data.labelId.split(',').map(item => { return parseInt(item); }) : [];
            });
        },
        handleSubmit () {
            this.$refs.forms.validate(valid => {
                if (valid) {
                    this.isSaveing = true;
                    if (this.positionId) {
                        editPosition(this.forms, this.positionId).then(res => {
                            this.$message.success('编辑职位成功');
                            this.$emit('editDone', {
                                deptId: this.forms.deptId,
                                deptName: this.deptName,
                                id: this.positionId,
                                value: this.positionId,
                                label: this.forms.positionName,
                                type: 'position',
                                custom_id: this.forms.deptId + '' + this.positionId
                            });
                            
                        }).finally(() => {
                            this.isSaveing = false;
                        });
                    } else {
                        delete this.forms.id;
                        savePosition(this.forms).then(res => {
                            this.$message.success('添加职位成功');
                            this.$emit('saveDone', {
                                deptId: this.forms.deptId,
                                deptName: this.deptName,
                                id: res.data,
                                value: res.data,
                                label: this.forms.positionName,
                                type: 'position',
                                custom_id: this.forms.deptId + '' + res.data
                            });
                            
                        }).finally(() => {
                            this.isSaveing = false;
                        });
                    }
                } else {
                    return false;
                }
            });
        }
    }
};
</script>
<style scoped="scoped" lang="scss">
    .dialogEdit{
       /deep/ .el-form-item__content{
          .el-input {
               width: 240px;
            }
        }
    }
</style>
